<!--suppress ALL -->
<template>
  <div class="div-legendcontent">
    <transition name="el-zoom-in-top">
  <div v-show="isLegendShow" id="legend" class="div-LegendMain" :class="mouseIn===true?'largeImg':'normalImg'"
       @mouseenter="enter($event)" @mouseleave="leave($event)" @click="close($event)">
    <i
      type="text"
      class="chartModulePanelClose el-icon-close"
      style="float: right;"
      @click="close($event)"
    />
    <el-image :src="isLegendShow ? url + (currentSearchLayer ? currentSearchLayer.legendUrl:undefined) : url1"
              fit="fill"/>
  </div>
    </transition>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {legendUrl} from "@/api/yzt";

  export default {
    name: 'Legend',
    data() {
      return {
        imgLegend: '',
        mouseIn: false,
        url1: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        url: process.env.BASE_API + '/api/yxwh/slzt/downLegend/'
      }
    },
    methods: {
      enter(env) {
        this.mouseIn = true
      },
      leave(env) {
        this.mouseIn = false
      },
      close(env) {
        this.$store.commit('eswyzt/setShowLayerLegend', false)
      }
    },
    computed: {
      ...mapState({
        /**
         * 当前查询自定义图层
         * @param state
         * @returns {currentSearchLayer|(function(*))|*}
         */
        currentSearchLayer(state) {
          return state.eswyzt.currentSearchLayer;
        },
        /**
         * 显示属性表并查询数据
         * @param state
         * @returns {*}
         */
        isLegendShow(state) {
          return state.eswyzt.showLayerLegend
        }
      })
    }
  }
</script>

<style scoped>
  .div-LegendMain {
    position: absolute;
    width: 300px;
    height: 300px;
    bottom: 10px;
    right: 20px;
    z-index: 1000;
    border: 2px solid #cccccccc;
  }

  .div-legendcontent{
    height: 100%;
    width: 100%;
  }
  .largeImg {
    width: 450px;
    height: 450px;
  }

  .normalImg {
    width: 300px;
    height: 300px;
  }

  .chartModulePanelClose {
    position: absolute;
    right: -19px;
    margin: 10px;
    top: -20px;
    font-size: 16px;
    transition: transform 0.3s;
    background-color: #f44336;
    border-radius: 10px;
    color: #fff;
    padding: 2px;
    z-index: 900;
    cursor: pointer;
  }

  .el-image {
    width: 100%;
    height: 100%;
  }
</style>
